<template>
  <div class="standard-index-container container-no-margin">
    <div class="filter-container">
      <el-input
        v-model="standardListQuery.Query"
        class="filter-item"
        size="mini"
        style="width: 250px; margin-right: 10px"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        class="filter-item"
        type="primary"
        size="mini"
        icon="el-icon-search"
        @click="handleFilter"
      />
    </div>

    <el-table
      v-loading="loading.list"
      :data="standardList"
      border
      fit
      highlight-current-row
      max-height="10000"
      style="width: 100%;"
    >
      <el-table-column
        label="Title"
        show-overflow-tooltip
        min-width="120"
      >
        <template slot-scope="scope">
          <router-link :to="{ name:'StandardPanel', query: {id: scope.row.Id} }">
            <span class="link-type">{{ scope.row.Title }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column label="Version">
        <template slot-scope="scope">
          <span>{{ scope.row.Version }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Env">
        <template slot-scope="scope">
          <el-tag v-for="env in scope.row.EnvList" :key="env" type="primary">{{ env }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="Status" align="center" width="65">
        <template slot-scope="scope">
          {{ scope.row.Status }}
        </template>
      </el-table-column>

      <el-table-column
        label="Create Time"
        align="center"
        width="145"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.TimeMs.Create | parseTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="Action"
        align="center"
        width="150"
        class-name="action-cell"
      >
        <template slot-scope="scope">
          <router-link :to="{ name:`StandardPanel`, query: {id: scope.row.Id} }">
            <el-button type="success" size="mini" icon="el-icon-tickets" style="width: 40px" />
          </router-link>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            style="width: 40px; margin-left: 10px"
            :loading="scope.row.status === 'deleting'"
            @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="standardCount"
      :page.sync="standardListQuery.Page"
      :limit.sync="standardListQuery.PageSize"
      @pagination="fetchStandardList"
    />
  </div>
</template>

<script>
import { deleteStandard, fetchStandardList } from '@/api/standard'
import Pagination from '@/components/Pagination'

export default {
  name: 'StandardIndex',
  components: { Pagination },
  data() {
    return {
      standardList: [],
      standardListQuery: {
        Page: 1,
        PageSize: 10,
        Query: ''
      },
      loading: {
        list: false
      },
      standardCount: 0
    }
  },
  watch: {},
  created() {
    this.fetchStandardList()
  },
  methods: {
    async fetchStandardList() {
      try {
        this.$set(this.loading, 'list', true)
        const data = await fetchStandardList(this.standardListQuery)
        if (data.Message === 'ok') {
          this.standardCount = data.Count
          this.standardList = data.Data
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.$set(this.loading, 'list', false)
      }
    },
    handleFilter() {
      this.standardList = []
      this.standardListQuery.Page = 1
      this.fetchStandardList()
    },
    async handleDelete(row) {
      const oldStatus = row.status
      row.status = 'deleting'
      try {
        const data = await deleteStandard(row.Id)
        if (data.Message === 'ok') {
          this.$notify({
            title: 'Success',
            message: 'Delete standard successfully.',
            type: 'success',
            duration: 2000
          })
          for (const tmp of this.standardList) {
            if (tmp.Id === row.Id) {
              this.standardList.splice(this.standardList.indexOf(tmp), 1)
            }
          }
          this.$store.dispatch('standard/getStandardTree')
        }
      } catch (e) {
        console.log(e)
        this.$set(row, 'status', oldStatus)
      }
    }
  }
}
</script>

<style lang="scss">
.standard-index-container {
}
</style>
